<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0"/>
    <meta name="renderer" content="webkit">
    <title>NT ERP / 货柜 / 打印预览</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script src="/static/Admin/webjs/jquery.min.js"></script>
    <script src="/static/Admin/webjs/jquery.jqprint-0.3.js"></script>
    <script src="/static/Admin/webjs/jquery-migrate.min.js"></script>
    <script src="/static/Admin/webjs/vue.js"></script>
    <script src="/static/Admin/webjs/formatunit.js"></script>
    <link href="/static/Admin/css/ntStyle.css" rel="stylesheet">
    <link type="text/css" rel="stylesheet" href="/static/Admin/css/ntPrint-sm.css">
</head>
<body>
<div id="container" class="container" v-if="isshow">

    <!--页眉-->

    <div class="row">
        <div class="col-6">
				<span style="float: left"><img src="/static/Admin/img/logo-packing-list.png" width="280px"
                                               alt="NT LOGO"></span>
        </div>
        <div class="col-6 text-right" style="padding-top:1rem">
            {{data.info.mangname}} / {{data.info.mangtime}}
        </div>
    </div>


    <!-- 订单头-->

    <div class="row">
        <div class="col-8">
            <div style="padding:0 1rem">
                <table class="table table-sm" style="margin-bottom: 0;">
                    <tbody>
                    <tr>
                        <td width="10%">ID/柜名</td>
                        <td width="20%">{{formatUnit(data.info.id,'ID')}} / {{data.info.name}}</td>
                    </tr>
                    <tr>
                        <td>SO号:</td>
                        <td>{{data.info.so_no}}</td>
                    </tr>
                    <tr>
                        <td>货柜号:</td>
                        <td>{{data.info.container_no}}</td>
                    </tr>
                    <tr>
                        <td>封条号:</td>
                        <td>{{data.info.seal_no}}</td>
                    </tr>
                    <tr>
                        <td>ETD/ETA:</td>
                        <td>{{data.info.etd_day!=0?data.info.etd_day:'-'}} / {{data.info.eta_day!=0?data.info.eta_day:'-'}}</td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <div class="col-4">
            <div class="card">
                <div class="card-header">货柜其他信息</div>
                <div class="card-body" style="padding: 0.5rem; min-height: 6rem">
                    <ul class="s-1" style="padding: 0.5rem 2rem;margin: 0">
                        <li>封条号：{{data.info.bl_no}}</li>
                        <li>承运商：{{data.info.carriername}}</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>


    <!-- 产品列表 -->

    <div class="row" style="padding-top:1rem">
        <div class="col-12">
            <table class="table bg-light" style="margin-bottom: 0;padding-left: 2rem">
                <tr>
                    <td align="right">
                        合计:
                        箱数: {{formatUnit(data.info.sum_ctn,'CTN')}}
                        <small class="unit">CTN</small>
                        / 重量:  {{formatUnit(data.info.sum_kgs,'KGS')}}
                        <small class="unit">KGS</small>
                        / 体积. : {{formatUnit(data.info.sum_cbm,'CBM')}}
                        <small class="unit">CBM</small>
                        /货值 {{formatUnit(data.info.sum_value,'CBM')}}
                        <small class="unit">CNY</small>
                    </td>
                </tr>
            </table>
            <table class="table table-sm table-bordered">
                <thead class="thead-light s-2">
                <tr>
                    <th>#</th>
                    <th style="width:40%;max-width: 40%">品名</th>
                    <th>箱数</th>
                    <th>箱规</th>
                    <th>数量</th>
                    <th>重量</th>
                    <th>体积</th>
                    <th>单价</th>
                    <th>小计</th>
                    <th>CIF</th>
                </tr>
                </thead>
                <tbody>
                <template v-for="(dataItem,index) in data.data">
                    <tr class="bg-mid b">
                        <td colspan="2">{{formatUnit(dataItem.id,'ID')}} / {{dataItem.company_name}} / {{dataItem.port_name}}</td>
                        <td colspan="8" align="right">
                            {{formatUnit(dataItem.CTN,'CTN')}}    <small class="unit">CTN</small>
                            {{formatUnit(dataItem.KGS,'KGS')}} <small class="unit">KGS</small>
                            {{formatUnit(dataItem.CBM,'CBM')}} <small class="unit">CBM</small>
                            {neq name='Request.session.admin.position_id' value='65'}
                            /{{formatUnit(dataItem.CNY,'CNY')}}     <small class="unit">CNY</small>
                            {/neq}
                        </td>
                    </tr>
                    <tr v-for="(proitem,key) in dataItem.buy_po_pack">
                        <td align="center">{{formatUnit(key+1,'ID')}}</td>
                        <td>
                            <div class="pro">
                                <div class="pro-icon"><img :src="proitem.proinfo.img_url" border="0" width="48px"
                                                           height="48px"></div>
                                <div class="pro-name">
                                    <small>
                                        {{
                                        proitem.proinfo.prochar_id+
                                        (proitem.proinfo.brand_name ? ' / '+proitem.proinfo.brand_name:'')+
                                        (proitem.proinfo.model ? ' / '+proitem.proinfo.model:'')
                                        }}
                                    </small>
                                    <br/>
                                    {{proitem.proinfo.pro_name}}
                                </div>
                            </div>
                        </td>
                        <td align="right">{{formatUnit(proitem.qty,'CTN')}}<br>
                            <small class="unit">CTN</small>
                        </td>
                        <td align="right">
                            {{proitem.ctn_size}}<br>
                            <small class="unit">CM</small>
                        </td>
                        <td align="right">
                            {{proitem.ctn_qty}}
                            <small class="unit">PCS/CTN</small>
                            <br>
                            {{proitem.sum_qty}}
                            <small class="unit">PCS</small>
                        </td>
                        <td align="right">
                            {{proitem.ctn_kgs}}
                            <small class="unit">KGS/CTN</small>
                            <br>
                            {{formatUnit(proitem.sum_kgs,'KGS')}}
                            <small class="unit">KGS</small>
                        </td>
                        <td align="right">
                            {{proitem.ctn_m3}}
                            <small class="unit">CBM/CTN</small>
                            <br>
                            {{formatUnit(proitem.sum_m3,'CBM')}}
                            <small class="unit">CBM</small>
                        </td>
                        <td align="right">
                            {{formatUnit(proitem.price,'CNY')}}<br>
                            <small class="unit">CNY</small>
                        </td>
                        <td align="right">
                            {{formatUnit(proitem.sum_price,'CNY')}}<br>
                            <small class="unit">CNY</small>
                        </td>
                        <td align="right">
                            {{formatUnit(proitem.cif?proitem.cif:'-','BRL')}}<br>
                            <small class="unit">BRL</small>
                        </td>
                    </tr>
                </template>
                </tbody>
            </table>
        </div>
    </div>
</div>
<script language="javascript" type="text/javascript">
    $(document).ready(function () {
        // 计算多少页
        $("#page-total").text(Math.ceil($(document.body).outerHeight(true) / 1300));
        // 计算分页位置
        var itr = 1;
        var ttotal = 0;
        $(".iTable").find("tr").each(function () {
            th = $(this).height();
            ttotal += th;
            itr++;
        })
    })
</script>
<script>
    new Vue({
        el: '#container',
        data: () => ({
            isshow: false,
            data: {}
        }),
        methods: {
            formatUnit: formatUnit,
        },
        created(){
            $.ajax({
                url: '/admin/logistics/preview',
                data: {
                    onethree: ''
                },
                type: 'post',
                success: res => {
                    data = JSON.parse(res)
                    console.log(data);
                    this.data = data
                    this.isshow = true
                    this.$nextTick(() => {
                        if(data.info.format==3){
                            //打印
                            $("#container").jqprint();
                        }else if(data.info.format==2){
                            location.href = '/admin/Logistics/preview?twoformat';
                        }
                    })
                }
            })
        }
    })

</script>
</body>
</html>